<template>
  <div>
    <AuthComponent></AuthComponent>

    <!--抽奖区域-->
    <div style="position: absolute; top: 500px; right: 100px;">
      <span>赢大奖活动哦哦哦哦哦哦!快来</span>
      <div v-for="item in prizeList" :key="item.id" style="text-align: center">
        <div :class="{'active': item.isActive}"> {{item.prizeName}}</div>
      </div>
      <el-button type="primary" @click="goLottery" style="margin-left: 40px;">抽奖吧,兄弟们</el-button>
    </div>

    <div>
      <el-drawer
          title="鉴赏古诗词"
          :visible.sync="drawer"
          direction="rtl"
          :before-close="handleClose">
        <el-button type="primary" @click="getPoetries(page-1)" style="margin-left: 20px;">上一首</el-button>
        <el-button type="primary" @click="getPoetries(page+1)" style="margin-left: 20px;">下一首</el-button>
        <div v-for="item in newslist" :key="item.title" style="padding: 20px;">
          <div style="font-size: 20px;text-align: center">{{ item.title }}</div>
          <div style="font-size: 12px;text-align: right; margin-right: 30px;">作者: {{item.author}}</div>
          <div style="font-size: 14px;text-align: left; line-height: 30px;">{{ item.content }}</div>
        </div>
      </el-drawer>
    </div>

    <div>
      <el-drawer
          title="一站到底"
          :visible.sync="yzddDrawer"
          direction="rtl"
          :before-close="yzddHandleClose">
        <el-button type="primary" @click="getYzdd" style="margin-left: 20px;">换一个吧</el-button>
        <div v-for="item in yzddnewsList" :key="item.id" style="padding: 20px;">
          <div style="font-size: 20px;text-align: center">问题: {{ item.quest }} ?</div>
          <el-button @click="showYzddResult = true" type="primary" style="margin-left: 16px;">
            点击查看答案
          </el-button>
          <div style="font-size: 14px;text-align: left; line-height: 30px;" v-if="showYzddResult">{{ item.result }}</div>
        </div>
      </el-drawer>
    </div>

    <!--走马灯区域-->
    <div >
      <el-button type="primary" @click="goMyBlog()" v-if="userInfo.token != null" style="margin-bottom: 20px">管理我的博客</el-button>
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
        鉴赏古诗词吧
      </el-button>
      <el-button @click="yzddDrawer = true" type="primary" style="margin-left: 16px;">
        一站到底吧
      </el-button>
    </div>
<!--    <div>-->
<!--      <el-carousel :interval="4000" type="card" height="300px">-->
<!--        <el-carousel-item v-for="item in imgArray" :key="item.id">-->
<!--          <img :src="item.src" :alt="item.alt" style="width: 100%">-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
<!--    </div>-->
    <!--博客列表区域-->
    <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
      <el-tab-pane label="全部" name="all">
        <div>
          <div v-for="blog in blogArray" :key="blog.id" style="position: relative; padding: 20px 0; margin: 10px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
            <div style="font-size: 20px;padding: 0 10px; color: #409EFF">{{ blog.title }}</div>
            <div style="margin: 20px;">
              {{ blog.content.substring(0, 30).replace(/\#|\`{3}|\*|(\*\s)/g, "")}}
            </div>
            <div style="font-size: 12px;padding: 0 10px; color: #C0C4CC">
           <span style="margin-right: 20px">

             <i class="el-icon-user"></i>
             {{ blog.creatorName }}
           </span>
              <span>
             <i class="el-icon-time"></i>
             {{ blog.createTime }}
           </span>
            </div>
            <div style="position: absolute;right:10px;top:30px;" >
              <el-button type="primary" @click=showBlog(blog.id) size="mini">查看</el-button>
              <el-button type="primary" @click=goSaveBlog(blog.id) size="mini" v-if="userInfo.token != null && blog.creatorId === userInfo.id">编辑</el-button>
            </div>
          </div>
        </div>
        <div class="block" style="width:60%;margin: 0 auto;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="item.cgName" v-for="item in categoryArray" :key="item.id" :name="item.id">
          <div>
            <div v-for="blog in blogArray" :key="blog.id" style="position: relative; padding: 20px 0; margin: 10px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
              <div style="font-size: 20px;padding: 0 10px; color: #409EFF">{{ blog.title }}</div>
              <div style="margin: 20px;">
                {{ blog.content.substring(0, 30) }}
              </div>
              <div style="font-size: 12px;padding: 0 10px; color: #C0C4CC">
           <span style="margin-right: 20px">

             <i class="el-icon-user"></i>
             {{ blog.creatorName }}
           </span>
                <span>
             <i class="el-icon-time"></i>
             {{ blog.createTime }}
           </span>
              </div>
              <div style="position: absolute;right:10px;top:30px;" >
                <el-button type="primary" @click=showBlog(blog.id) size="mini">查看</el-button>
                <el-button type="primary" @click=goMyBlog(blog.id) size="mini" v-if="userInfo.token != null && blog.creatorId === userInfo.id">编辑</el-button>
              </div>
            </div>
          </div>
          <div class="block" style="width:60%;margin: 0 auto;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import AuthComponent from "@/components/commen/AuthComponent";

export default {
  name: "BlogList",
  components: {
    AuthComponent
  },
  data() {
    return {
      showYzddResult: false,
      yzddDrawer: false,
      page: 1,
      drawer: false,
      prize: {},
      prizeList: [],
      imgArray: [
        {
          id: 1,
          src: "https://blog-beijing-com.oss-cn-beijing.aliyuncs.com/image.png?Expires=1623844681&OSSAccessKeyId=TMP.3KkWJ7AZrRRih3M3P94u5tEwL3prnW23HX3Ysz5X3W4bbFac95mdrkF5NjhqVC9CKjxEyGCSCxRmkLrJJrkWbEh7SMPTWu&Signature=HkR%2B4c99vIFRjinX%2FeQ1NaqXxpM%3D&versionId=CAEQERiBgMDq0pXB0BciIDc3ODNmNWZiODBhMTQ1YzBhYTJhYWQyYzYyNTFlODQ0&response-content-type=application%2Foctet-stream",
          alt: "暂时不能加载"
        },
        {
          id: 2,
          src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          alt: "暂时不能加载"
        },
        {
          id: 3,
          src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          alt: "暂时不能加载"
        }
      ],
      blogArray: [],
      pageSize: 5,
      currentPage: 0,
      total: 0,
      cgId: null,
      activeName: 'all',
      categoryArray: [
        {
          id: '',
          cgName: ''
        }
      ],
      userInfo: {
        headImgUrl: '',
        userName: '',
        id: '',
        token: null
      },
      newslist: [],
      yzddnewsList: []
    }
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo
    this.getCategoryList()
    this.getBlogList()
    console.log(this.userInfo)
    if (!this.userInfo) {
      this.userInfo =  {
        id: '',
        headImgUrl: '',
        userName: '',
        token: null
      }
    }
    // 加载抽奖信息
    this.getPrizeList()
    this.getPoetries(Math.floor(Math.random()*100) + 1);
    this.getYzdd();
  },
  methods: {

    yzddHandleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.yzddDrawer = false;
            done();
          })
          .catch(_ => {});
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.drawer = false;
            done();
          })
          .catch(_ => {});
    },
     async goLottery() {
       this.prize = {}
      let that = this;
      let i = 0;
      let prizeId = null;
      let res = await this.$http("/lottery/goLottery")
      res = res.data
      if (res.code === 0) {
        setTimeout(function () {
          that.prize = res.data
          console.log(that.prize.id)
        }, 3000);
      } else {
        alert("抽奖出错了, 谁他妈写的代码!! 还是网络有问题!!!!, 请重新点击")
        return;
      }
      let flag = false;
       let t = setInterval(function () {
         that.prizeList.forEach(item => {
           item.isActive = false;
         })
         if ( i >= that.prizeList.length) {
           i = 0;
         }
         prizeId = that.prizeList[i].id;
         that.prizeList[i].isActive = true;
         console.log("prizeId="+prizeId)
         while (prizeId == that.prize.id) {
           clearInterval(t);
           flag = true;
           break;
         }
         i++;
       }, 300)
    },
    getYzdd() {
      this.showYzddResult = false;
      this.$http("/data/yzdd").then(res => {
        res = res.data;
        if (res.code == 0) {
          let result = JSON.parse(res.data)
          console.log(result)
          if (result.code == 200) {
            this.yzddnewsList = result.newslist
          }
        }
      })
    },
    getPoetries(page) {
      if (page <= 0) {
        page = 1;
      }
      this.page = page;
      this.$http("/data/poetries?page=" + page).then(res => {
        res = res.data;
        if (res.code == 0) {
          let result = JSON.parse(res.data)
          console.log(result)
          if (result.code == 200) {
            this.newslist = result.newslist
          }
        }
      })
    },
    getPrizeList() {
       let that = this;
      this.$http("/lottery/getPrizeList").then(res => {
        res = res.data
        if (res.code === 0) {
          let prizeList = res.data
          prizeList.forEach(item => {
            item.isActive = false;
            that.prizeList.push(item);
          })
          console.log(this.prizeList)
        }
      }).catch(err => {

      })
    },
    handleClick(tab, event) {
      if (tab.name === 'all') {
        this.cgId = null
      } else {
        this.cgId = tab.name;
      }
      this.getBlogList();
    },
    getCategoryList() {
      this.$http("/category/detail/all?pageNum=0&pageSize=100").then(res => {
        res = res.data
        if (res.code === 0) {
          res = res.data
          this.categoryArray = res.content
        }
      }).catch(err => {

      })
    },
    loginOut() {
       localStorage.removeItem("userInfo")
        this.userInfo =  {
          id: '',
          headImgUrl: '',
          userName: '',
          token: null
        }
    },
    goLogin() {
      this.$router.push({ path: `/login`})
    },
    goCategory() {
      this.$router.push({ path: `/category/list/`})
    },
    getBlogList() {
      let currentPage = 0;
      if (this.currentPage <= 0) {
        currentPage = 0;
      } else {
        currentPage = this.currentPage - 1;
      }
      let params = "";
      if (!this.cgId) {
        params = currentPage+"&pageSize="+this.pageSize
      } else {
        params = currentPage+"&pageSize="+this.pageSize+"&cgId="+this.cgId;
      }
      this.$http.get("/blog/public/list?pageNum="+params).then(res => {
        res = res.data
        if (res.code === 0) {
          res = res.data
          this.blogArray = res.content
          this.total = res.totalElements;
        }
      }).catch(err => {

      })
    },
    showBlog(blogId) {
      let flag = 1
      this.$router.push({ path: `/blog/detail/${blogId}/${flag}`})
    },
    goMyBlog() {
      this.$router.push({ path: `/blog/person/list`})
    },
    goSaveBlog(blogId) {
      this.$router.push({ path: `/blog/save/${blogId}`})
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getBlogList(this.currentPage, this.pageSize)
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getBlogList()
    },
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.active {
  color: red;
  border: 1px solid red;
}
</style>